.filterContainer {
  .filterBox {
    @apply flex items-center sticky left-0 z-10;
    background-color: #141414;
    top: 5rem;
    height: 1.875rem;

    .filter {
      @apply relative;
      margin-left: 3.75rem;

      &.filterActive {
        .filterContent {
          @apply opacity-100;

          & > span {
            @apply text-theme;
          }

          & > img {
            transform: rotate(-90deg);
          }
        }

        .filterPanel {
          transform: translateX(-50%) scaleY(1);
          transition: all 0.2s;
        }
      }

      .filterContent {
        @apply h-4 text-base leading-4 text-white flex items-center cursor-pointer opacity-80;

        &:hover {
          @apply opacity-100;
        }

        & > * {
          transition: all 0.2s;
        }

        & > span {
          @apply mr-3 whitespace-nowrap;
        }

        & > img {
          @apply h-4 w-4 object-contain;
          transform: rotate(90deg);
        }
      }

      .filterPanel {
        @apply absolute bg-bg25 left-2/4 flex flex-wrap;
        padding: 0.625rem;
        padding-bottom: 0;
        transform: translateX(-50%) scaleY(0);
        top: 1.875rem;
        width: 23rem;
        min-height: 5.25rem;
        border-radius: 0.625rem;
        box-shadow: var(--shadow);
        transform-origin: top;

        .item {
          @apply rounded text-sm text-white-80;
          margin-right: 0.625rem;
          margin-bottom: 0.625rem;
          line-height: 0.875rem;
          padding: 0.375rem 0.625rem;
          height: 1.625rem;

          &:hover {
            @apply text-white;
            background-color: #313131;
          }

          &.itemActive {
            @apply text-theme;
            background-color: #313131;
          }
        }
      }
    }
  }

  .query {
    @apply flex items-end sticky left-0 z-4;
    top: 6.875rem;
    height: 2.5rem;
    background-color: #141414;

    h1 {
      @apply text-white text-xl mr-4;
    }

    p {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .allBody {
    @apply mt-20;
    min-height: calc(100vh - 29.375rem);
  }

  .loading {
    @apply w-full text-center mt-5;
    margin-bottom: 1.125rem;

    .endText {
      @apply text-white-80;
    }

    .search {
      @apply flex items-center px-2 rounded mx-auto my-2 h-9;
      width: 18.75rem;
      border: 1px solid rgba(255, 255, 255, 0.8);

      input {
        @apply flex-1 px-2 bg-transparent text-sm;
      }

      img {
        @apply h-8 cursor-pointer;
      }
    }

    .btn {
      @apply text-white px-2 w-fit;
      border: 1px solid var(--theme-color);
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .filterContainerPhone {
    margin-top: 5.875rem !important;

    .filterBox {
      @apply px-4 overflow-x-auto;
      top: 5.875rem;

      .filter {
        @apply ml-4;

        .filterContent {
          @apply text-sm opacity-100;

          & > span {
            @apply mr-2;
          }

          & > img {
            @apply h-3 w-3;
          }
        }

        .filterPanel {
          @apply fixed w-screen;
          top: 8.125rem;
        }
      }
    }

    .query {
      @apply px-4;
      top: 7.75rem;
    }

    .allBody {
      @apply mt-0;
    }
  }
}
